<script setup lang="ts">
import { ref, watch, computed } from 'vue'
import { RouterView, useRouter, useRoute } from 'vue-router'
import {
  Upload,
  PictureFilled,
  DataAnalysis,
  Check,
  Loading
} from '@element-plus/icons-vue'

const router = useRouter()
const route = useRoute()

const activeMenu = ref(route.path)

// 监听路由变化
watch(
  () => route.path,
  (newPath) => {
    activeMenu.value = newPath
  }
)

const handleMenuSelect = (index: string) => {
  router.push(index)
}

// 计算当前步骤
const currentStep = computed(() => {
  switch (route.path) {
    case '/upload':
      return 0
    case '/preprocess':
      return 1
    case '/result':
      return 2
    default:
      return 0
  }
})
</script>

<template>
  <el-container class="app-container">
    <el-aside class="app-aside" width="220px">
      <div class="logo-container">
        <div class="logo-content">
          <img src="/src/assets/ynulogo.png" alt="Logo" class="logo-image">
          <h2>车辆检测系统</h2>
        </div>
      </div>
      <el-menu
        :default-active="activeMenu"
        class="app-menu"
        @select="handleMenuSelect"
        router
      >
        <div class="menu-title">功能导航</div>
        <el-menu-item index="/upload">
          <el-icon><Upload /></el-icon>
          <span>图片上传</span>
        </el-menu-item>
        <el-menu-item index="/preprocess">
          <el-icon><PictureFilled /></el-icon>
          <span>预处理检测</span>
        </el-menu-item>
        <el-menu-item index="/result">
          <el-icon><DataAnalysis /></el-icon>
          <span>检测结果</span>
        </el-menu-item>
      </el-menu>
      <div class="aside-footer">
        <span>© 2024 车辆检测系统</span>
      </div>
    </el-aside>
    <el-container class="main-container">
      <el-header class="app-header">
        <div class="header-content">
          <h1>HKWZ智能车辆与车牌检测识别系统</h1>
          <div class="header-right">
            <el-button type="primary" link>
              <el-icon><Upload /></el-icon>
              快速上传
            </el-button>
          </div>
        </div>
      </el-header>
      <el-main class="main-content">
        <div class="content-wrapper">
          <div class="router-view-container">
            <RouterView v-slot="{ Component }">
              <transition name="fade" mode="out-in">
                <component :is="Component" />
              </transition>
            </RouterView>
          </div>
          
          <!-- 右侧事件流进度 -->
          <div class="process-timeline">
            <el-steps direction="vertical" :active="currentStep">
              <el-step
                title="图片上传"
                description="上传待检测的车辆图片"
              >
                <template #icon>
                  <el-icon>
                    <component :is="currentStep === 0 ? Upload : currentStep > 0 ? Check : Upload" />
                  </el-icon>
                </template>
              </el-step>
              <el-step
                title="预处理检测"
                description="选择模型并进行检测"
              >
                <template #icon>
                  <el-icon>
                    <component :is="currentStep === 1 ? PictureFilled : currentStep > 1 ? Check : PictureFilled" />
                  </el-icon>
                </template>
              </el-step>
              <el-step
                title="结果分析"
                description="查看检测结果与分析"
              >
                <template #icon>
                  <el-icon>
                    <component :is="currentStep === 2 ? DataAnalysis : currentStep > 2 ? Check : DataAnalysis" />
                  </el-icon>
                </template>
              </el-step>
            </el-steps>
          </div>
        </div>
      </el-main>
    </el-container>
  </el-container>
</template>

<style>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body, #app {
  height: 100%;
  width: 100%;
  overflow-x: hidden;
  margin: 0;
  padding: 0;
}

body {
  background: linear-gradient(135deg, #e0e7ff 0%, #f5f7fa 100%);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  margin: 0;
  padding: 0;
  --primary-color: #409EFF;
  --primary-light: #ecf5ff;
  --text-color: #2c3e50;
  --border-radius: 8px;
  --transition-speed: 0.3s;
}

/* 过渡动画 */
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.3s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}
</style>

<style scoped>
.app-container {
  min-height: 100vh;
  width: 100%;
  max-width: 100%;
  background: transparent;
  margin: 0;
  padding: 0;
}

.app-aside {
  background: #fff;
  box-shadow: 2px 0 8px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  transition: width var(--transition-speed);
  border-right: 1px solid #ebeef5;
}

.logo-container {
  height: 80px;
  background: var(--primary-color);
  padding: 0 20px;
  transition: all var(--transition-speed);
}

.logo-content {
  height: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
}

.logo-image {
  width: 32px;
  height: 32px;
  object-fit: contain;
}

.logo-container h2 {
  color: white;
  font-size: 1.2rem;
  font-weight: 600;
  margin: 0;
  white-space: nowrap;
}

.menu-title {
  padding: 16px 20px 8px;
  color: #909399;
  font-size: 0.85rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.app-menu {
  border-right: none;
  padding: 8px;
}

:deep(.el-menu-item) {
  height: 50px;
  line-height: 50px;
  border-radius: var(--border-radius);
  margin: 4px 0;
}

:deep(.el-menu-item.is-active) {
  background: var(--primary-light) !important;
  color: var(--primary-color);
}

:deep(.el-menu-item:hover) {
  background: #f5f7fa !important;
}

.aside-footer {
  margin-top: auto;
  padding: 16px;
  text-align: center;
  font-size: 0.8rem;
  color: #909399;
  border-top: 1px solid #ebeef5;
}

.main-container {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background: #f5f7fa;
}

.app-header {
  height: 80px;
  width: 100%;
  background: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  padding: 0 24px;
  position: relative;
  z-index: 2;
}

.header-content {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.app-header h1 {
  font-size: 1.8rem;
  font-weight: 600;
  color: var(--text-color);
  margin: 0;
}

.header-right {
  display: flex;
  align-items: center;
  gap: 16px;
}

.main-content {
  flex: 1;
  padding: 24px;
  background: transparent;
  min-height: calc(100vh - 80px);
  position: relative;
  width: 100%;
}

.content-wrapper {
  display: flex;
  height: 100%;
  margin-right: 196px; /* 为事件流留出空间 */
}

.router-view-container {
  flex: 1;
  width: 100%;
  min-width: 0; /* 防止子元素溢出 */
}

.process-timeline {
  width: 180px;
  padding: 16px;
  background: #fff;
  border-radius: var(--border-radius);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
  transition: all var(--transition-speed);
  position: fixed;
  right: 24px;
  top: 104px;
  bottom: 24px;
  z-index: 1;
}

:deep(.el-step__title) {
  font-size: 0.9rem;
  font-weight: 500;
  line-height: 1.2;
  margin-top: 0;
}

:deep(.el-step__description) {
  font-size: 0.8rem;
  margin-top: 4px;
  padding-bottom: 8px;
  color: #909399;
}

:deep(.el-step__icon-inner) {
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

:deep(.el-step__icon) {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}

:deep(.el-step__line) {
  background-color: #e4e7ed;
}

:deep(.el-step.is-success .el-step__line) {
  background-color: var(--primary-color);
}

:deep(.el-step__icon.is-active) {
  background-color: var(--primary-color);
  border-color: var(--primary-color);
}

:deep(.el-step__icon.is-active .el-icon) {
  color: #fff;
}

:deep(.el-step.is-vertical) {
  flex: unset;
  padding-bottom: 20px;
}

@media (max-width: 1200px) {
  .process-timeline {
    display: none;
  }
}

:deep(.el-menu-item .el-icon) {
  font-size: 1.2rem;
  margin-right: 12px;
}

@media (max-width: 768px) {
  .app-aside {
    width: 80px !important;
  }

  .logo-container {
    padding: 0 8px;
  }

  .logo-container h2,
  .menu-title,
  .aside-footer {
    display: none;
  }

  :deep(.el-menu-item span) {
    display: none;
  }

  :deep(.el-menu-item .el-icon) {
    margin: 0;
  }

  .app-header {
    padding: 0 16px;
  }

  .app-header h1 {
    font-size: 1.4rem;
  }

  .main-content {
    padding: 16px;
  }
}

/* 亮色主题优化 */
:deep(.el-menu-item) {
  color: var(--text-color);
}

:deep(.el-button--primary) {
  --el-button-bg-color: var(--primary-color);
  --el-button-border-color: var(--primary-color);
  --el-button-hover-bg-color: var(--primary-color);
  --el-button-hover-border-color: var(--primary-color);
}
</style>
